<template>
	<a
		class="base-link no-underline"
		v-if="isExternalLink"
		v-bind="$attrs"
		:href="to"
		target="_blank">
		<slot />
	</a>
	<router-link class="base-link no-underline" v-else :to="toLink" v-bind="$attrs">
		<slot />
	</router-link>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
import { useAppStore } from '@/store'

const appStore = useAppStore()

defineOptions({ name: 'BaseLink' })

const props = defineProps({
	to: {
		type: String,
		default: ''
	}
})

const toLink = computed(() => `/${appStore.lang}${props.to}`)
const isExternalLink = computed(() => typeof props.to === 'string' && props.to.startsWith('http'))
</script>
<style lang="scss" scoped></style>
